{{ define "cart/cart.html" }}

{{ template "base/base_header.html" .}}
<head>
	<title>天天生鲜-购物车</title>
	{{ template "base/base_import.html" .}}

</head>
<body>
	{{ template "base/base_top.html" .}}
	{{ template "base/base_search.html" .}}

	<div class="total_count">全部商品<em>{{ .totalCount }}</em>件</div>	
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>

	{{ range .goods }}
		<ul class="cart_list_td clearfix">
			<li class="col01"><input type="checkbox" name="" checked></li>
			<li class="col02"><img src="{{ .image }}"></li>
			<li class="col03">{{ .name }}<br><em>{{ .price }}元/{{ .unite }}</em></li>
			<li class="col04">{{ .unite }}</li>
			<li class="col05">{{ .price }}</li>
			<li class="col06">
				<div class="num_add">
					<a href="javascript:;" class="add fl">+</a>
					<input type="text" sku_id="{{ .id }}" class="num_show fl" value="{{ .count }}">	
					<a href="javascript:;" class="minus fl">-</a>	
				</div>
			</li>
			<li class="col07">{{ .subPrice }}元</li>
			<li class="col08"><a href="javascript:;">删除</a></li>
		</ul>
	{{ end }}

	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>{{ .totalPrice }}</em><br>共计<b>{{ .totalCount }}</b>件商品</li>
		<li class="col04"><a href="#">去结算</a></li>
	</ul>

	{{ template "base/base_bottom.html" .}}
</body>
	<script type="text/javascript">

		// 计算被选中的商品的总件数和总价格
		function update_page_info() {
			// 获取所有被选中的商品的checkbox
			// 获取所有被选中的商品所在的ul元素
			total_count = 0
			total_price = 0
			$('.cart_list_td').find(':checked').parents('ul').each(function () {
				// 获取商品的数目和小计
				count = $(this).find('.num_show').val()
				amount = $(this).children('.col07').text()
				// 累加计算商品的总件数和总价格
				count = parseInt(count)
				amount = parseFloat(amount)
				total_count += count
				total_price += amount
			})
			// 设置被选中的商品的总件数和总价格
			$('.settlements').find('em').text(total_price.toFixed(2))
			$('.settlements').find('b').text(total_count)
		}

		// 计算商品的小计
		function update_goods_amount(sku_ul) {
			// 获取商品的价格和数量
			count = sku_ul.find('.num_show').val()
			price = sku_ul.children('.col05').text()
			// 计算商品的小计
			amount = parseInt(count)*parseFloat(price)
			// 设置商品的小计
			sku_ul.children('.col07').text(amount.toFixed(2)+'元')
		}

		// 商品的全选和全不选
		$('.settlements').find(':checkbox').change(function () {
			// 获取全选的checkbox的选中状态
			is_checked = $(this).prop('checked')
			// 遍历商品的对应的checkbox，设置这些checkbox的选中状态和全选的checkbox保持一致
			$('.cart_list_td').find(':checkbox').each(function () {
				$(this).prop('checked', is_checked)
			})
			// 更新页面的信息
			update_page_info()
		})

		// 商品对应的checkbox状态发生改变时，设置全选checkbox的状态
		$('.cart_list_td').find(':checkbox').change(function () {
			// 获取页面上所有商品的数目
			all_len = $('.cart_list_td').length
			// 获取页面上被选中的商品的数目
			checked_len = $('.cart_list_td').find(':checked').length
			is_checked = true
			if (checked_len < all_len){
				is_checked = false
			}
			$('.settlements').find(':checkbox').prop('checked', is_checked)
			// 更新页面的信息
			update_page_info()
		})

		// 更新购物车中商品的数量
		error_update = false
		total = 0
		function update_remote_cart_info(sku_id, count) {
			// 组织参数
			params = {'sku_id':sku_id, 'count':count}
			// 设置ajax请求为同步
			$.ajaxSettings.async = false
			// 发起ajax post请求，访问/cart/update, 传递参数:sku_id count
			// 默认发起的ajax请求都是异步的，不会等回调函数执行
			$.post('/ttsx/cart/update', params, function (data) {
				if (data.Code == 3){
					// 更新成功
					error_update = false
					total = data.total_count
				}
				else{
					// 更新失败
					error_update = true
					alert(data.errMsg)
				}
			})
			// 设置ajax请求为异步
			$.ajaxSettings.async = true
		}

		// 购物车商品数量的增加
		$('.add').click(function () {
			// 获取商品的id和商品的数量
			sku_id = $(this).next().attr('sku_id')
			count = $(this).next().val()

			// 组织参数
			count = parseInt(count)+1

			// 更新购物车记录
			update_remote_cart_info(sku_id, count)

			// 判断更新是否成功
			if (error_update == false){
				// 重新设置商品的数目
				$(this).next().val(count)
				// 计算商品的小计
				update_goods_amount($(this).parents('ul'))
				// 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
				is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
				if (is_checked){
					// 更新页面信息
					update_page_info()
				}
				// 更新页面上购物车商品的总件数
				$('.total_count').children('em').text(total)
			}
		})

		// 购物车商品数量的减少
		$('.minus').click(function () {
			// 获取商品的id和商品的数量
			sku_id = $(this).prev().attr('sku_id')
			count = $(this).prev().val()

			// 校验参数
			count = parseInt(count)-1
			if (count <= 0){
				return
			}

			// 更新购物车中的记录
			update_remote_cart_info(sku_id, count)

			// 判断更新是否成功
			if (error_update == false){
				// 重新设置商品的数目
				$(this).prev().val(count)
				// 计算商品的小计
				update_goods_amount($(this).parents('ul'))
				// 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
				is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
				if (is_checked){
					// 更新页面信息
					update_page_info()
				}
				// 更新页面上购物车商品的总件数
				$('.total_count').children('em').text(total)
			}
		})

		// 记录用户输入之前商品的数量
		pre_count = 0
		$('.num_show').focus(function () {
			pre_count = $(this).val()
		})

		// 手动输入购物车中的商品数量
		$('.num_show').blur(function () {
			// 获取商品的id和商品的数量
			sku_id = $(this).attr('sku_id')
			count = $(this).val()

			// 校验参数
			if (isNaN(count) || count.trim().length==0 || parseInt(count)<=0){
				// 设置商品的数目为用户输入之前的数目
				$(this).val(pre_count)
				return
			}

			// 更新购物车中的记录
			count = parseInt(count)
			update_remote_cart_info(sku_id, count)

			// 判断更新是否成功
			if (error_update == false){
				// 重新设置商品的数目
				$(this).val(count)
				// 计算商品的小计
				update_goods_amount($(this).parents('ul'))
				// 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
				is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
				if (is_checked){
					// 更新页面信息
					update_page_info()
				}
				// 更新页面上购物车商品的总件数
				$('.total_count').children('em').text(total)
			}
			else{
				// 设置商品的数目为用户输入之前的数目
				$(this).val(pre_count)
			}
		})

		// 删除购物车中的记录
		$('.cart_list_td').children('.col08').children('a').click(function () {
			// 获取对应商品的id
			sku_id = $(this).parents('ul').find('.num_show').attr('sku_id')
			// 组织参数
			params = {'sku_id':sku_id}
			// 获取商品所在的ul元素
			sku_ul = $(this).parents('ul')
			
			// 发起ajax post请求， 访问/cart/delete, 传递参数:sku_id
			$.post('/ttsx/cart/delete', params, function (data) {
				if (data.Code == 2){
					// 删除成功，异常页面上商品所在的ul元素
					sku_ul.remove()
					// 获取sku_ul中商品的选中状态
					is_checked = sku_ul.find(':checkbox').prop('checked')
					if (is_checked){
						// 更新页面信息
						update_page_info()
					}
					// 重新设置页面上购物车中商品的总件数
					$('.total_count').children('em').text(data.total_count)
				}
				else{
					alert(data.errMsg)
				}
			})
		})

		// 点击结算，提交选中商品的sku_id
		$('.settlements').find('a').click(function() {
			// 遍历被选中的商品
			var sku_id_list = []
			$('.cart_list_td').find(':checked').parents('ul').each(function() {
				sku_id = $(this).find('.num_show').attr('sku_id')
				sku_id_list.push(sku_id)
			})
			// 拼接请求的url
			var url = "/ttsx/order/select?sku_ids="
			url += sku_id_list.join(",")
			// 再次设置值
			$(this).attr('href', url)
		})

	</script>

</html>

{{ end }}